<template>
    <div id="cases" class="my-border">
        <el-form ref="form" :model="form" :inline="true">
          <el-form-item label="案号">
            <el-input v-model="form.ah"></el-input>
          </el-form-item>
          <el-form-item label="年度">
            <el-select v-model="form.year" :clearable="true">
              <el-option v-for="v in years" :key="v.value" :label="v.value" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="AH_str" label="案号" >
            </el-table-column>
            <el-table-column prop="LAAY" label="案由" >
            </el-table-column>
            <el-table-column prop="DSR" label="当事人" >
                <template slot-scope="scope">
                    <p v-for="(d,i) in scope.row.dsrList" :key="d.XM">
                        {{`${d.DW}:${d.XM}(证件号码：${d.ZJHM})` }}
                    </p>

                </template>
            </el-table-column>
            <el-table-column label="立案标的">
                <template slot-scope="scope">
                    <p>{{ scope.row.LABD }}元</p>
                </template>
            </el-table-column>
            <el-table-column prop="CBFG" label="承办法官"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" @click="handleClick( scope.row)" icon="el-icon-edit">填写资料</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</template>

<script>
    import {mapActions, mapState} from "vuex";
    import CSRQ from "@/components/Form/computed/CSRQ";

    export default {
        name: "Cases",
        data() {
            let years = this.getYears()
            return {
              years,
                tableData: [],
                total :0,
                pageSize:5,
                pageNumber: 0,
              form:{
                ah: '',
                year: null,
              }
            }
        },

        computed: {


            ...mapState([
                'step'
            ]),
        },

        methods:{


            ...mapActions([
                'getToken','setToken','resetToken'
                ,'setStep','setAH','setLABD','setTrialExtraId'
            ]),
          ...CSRQ,
            getList(){

                let params = {};

                params.pageSize = this.pageSize;
                params.pageNumber = this.pageNumber;
              params.ah = this.form.ah;
              params.year = this.form.year;

                return this.$api.getTrialList(params)
                    .then(res=>{

                        this.tableData = res.data.rows;
                        this.total = res.data.total;
                    })
            },

            handleSizeChange(pageSize){
                this.pageSize = pageSize;
            },

            handleCurrentChange(page){
                this.pageNumber = page;
            },


            handleClick(row){
                this.setAH(row.AH)
                this.setLABD(row.LABD)
                this.setStep(this.step + 1);
              //  this.setTrialExtraId(row.trial_extra_id);
            }

        },

        created(){
            this.getList();
        },

        watch:{

            pageSize(){
                this.getList()
            },

            pageNumber(){
                this.getList();
            }
        },





    }
</script>

<style scoped>

</style>